<template>
  <base-content>
    <template>
      <sf-base-search ref="baseSearchEle" :base-searchs="baseSearchs" :base-handles="baseHandles" :base-data="baseFormData" />
      <sf-grid ref="grid" :columns="columns" :operations="operations" :store-config="configs" />
      <!-- 修改推广关系 -->
      <el-dialog title="修改推广关系" :visible.sync="isShow" width="30%">
        <sf-base-form ref="updateForm" :eles="eles" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmitChangeRelaship">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </base-content>
</template>

<script>
import { mapGetters } from 'vuex'
import { fetchNewUserList, fetchNewUserById, fetchUpdateRelaship } from '@/api/user'
import { queryParams, hasPermission } from '@/utils'

export default {
  data() {
    return {
      // here is dialog
      isShow: false,
      eles: [
        {
          label: '用户ID',
          elType: 'input',
          readonly: true,
          placeholder: '',
          value: '',
          name: 'id'
        },
        {
          label: '原邀请码',
          elType: 'input',
          placeholder: '',
          readonly: true,
          value: '',
          name: 'no'
        },
        {
          label: '新邀请码',
          elType: 'input',
          maxlength: '6',
          placeholder: '请输入新推广人ID',
          value: '',
          name: 'parent_promotion_code'
        }
      ],
      baseSearchs: [
        {
          label: '推荐者推广码',
          elType: 'input',
          placeholder: '请输入推荐者推广码',
          value: '',
          name: 'parent_promotion_code'
        },
        {
          label: '注册时间',
          elType: 'date-time-range',
          placeholder: '请选择注册时间',
          width: '380px',
          value: [],
          name: 'register_time'
        }
      ],
      baseHandles: [
        {
          btnType: 'primary',
          text: '查询',
          key: 'search',
          handle: this.handleBaseSearch
        },
        {
          btnType: 'default',
          text: '重置',
          key: 'reset',
          handle: this.handleBaseSearch
        }
      ],
      baseFormData: {},
      // here is table
      columns: [
        {
          title: '用户id',
          props: 'id'
        },
        {
          title: '用户手机号',
          props: 'phone'
        },
        {
          title: '注册时间',
          props: 'insert_time'
        },
        {
          title: '微信昵称',
          props: 'wechat_nick_name'
        },
        {
          title: '推荐者推广码',
          props: 'parent_promotion_code'
        }
      ],
      operations: [
        {
          label: '修改推荐关系',
          handler: (row) => {
            const { id } = row
            fetchNewUserById(id).then((res) => {
              this.isShow = true
              const { parent_promotion_code } = res?.data
              this.$nextTick(() => {
                this.$refs.updateForm.setVal({
                  id,
                  no: parent_promotion_code,
                  parent_promotion_code: ''
                })
              })
            })
          }
        }
      ],
      formData: {},
      configs: {
        loadDataApi: (p) => {
          return new Promise((resolve) => {
            fetchNewUserList(queryParams(p, this.formData)).then((res) => {
              resolve(res)
            })
          })
        },
        fetchListData: function (res) {
          return res.data
        },
        fetchTotal: function (res) {
          return res.meta.count
        },
        generateQueryParams: function (pagination) {
          const { pageIndex, pageSize } = pagination
          return {
            page_num: pageIndex,
            page_size: pageSize
          }
        }
      }
    }
  },
  computed: {
    ...mapGetters(['sidebar']),
    routes() {
      return this.$router.options.routes
    }
  },
  mounted() {
    const isHidden = !hasPermission('拉新管理')
    if (isHidden) {
      this.operations = []
    }
  },
  methods: {
    handleSubmitChangeRelaship() {
      const val = this.$refs.updateForm.getVal()
      delete val.no
      if (!val.parent_promotion_code) {
        return this.$message.error('请输入新邀请码')
      }
      fetchUpdateRelaship(val).then((res) => {
        if (res.code === '0') {
          this.$message.success('修改成功')
          this.isShow = false
          this.$refs.grid.query()
        } else {
          this.$message.error(`修改失败：${res.msg}`)
        }
      })
    },
    // val: 当前表单中的数据
    // key 用来handles 中设置的唯一标识key值
    handleBaseSearch(val, key) {
      if (key === 'search') {
        // this.formData = val
        const { parent_promotion_code, register_time } = val
        this.formData = {
          parent_promotion_code,
          register_start_time: register_time && register_time[0],
          register_end_time: register_time && register_time[1]
        }
        this.$refs.grid.query()
      } else {
        const formEle = this.$refs.baseSearchEle
        formEle.empty()
        this.formData = {
          parent_promotion_code: '',
          register_start_time: '',
          register_end_time: ''
        }
        this.$refs.grid.query()
      }
    },
    handerAll(val, key) {
      console.log(val, key)
    }
  }
}
</script>
